<template>
	<!-- 垂直视频轮播组件 -->
	<view class="vertical-video-swiper">
		<swiper 
			class="swiper-container"
			:style="{height: swiperHeight}"
			:vertical="true"
			:autoplay="false" 
			:circular="true" 
			:interval="3000" 
			:duration="500"
			:current="swiperCur"
			@change="swiperChange"
		>
			<swiper-item 
				v-for="(item, index) in videoList" 
				:key="index" 
				:class="{ active: index == swiperCur }"
			>
				<view class="video-item" @click="toggleVideoPlay(index)">
					<!-- 视频播放器 - 微信小程序使用原生video -->
					<!-- #ifdef MP -->
					<video 
						v-if="shouldRenderVideo(index)"
						:id="`myVideo${index}`"
						:src="shouldLoadVideoSrc(index) ? item.videoUrl : ''"
						style="width: 100%; height: 100%"
						:show-mute-btn="true"
						object-fit="contain"
						:loop="true"
						:show-center-play-btn="false"
						:controls="false"
						:enable-progress-gesture="false"
						:show-loading="true"
						:show-fullscreen-btn="false"
						@play="videoPlay(index)"
						@pause="videoPause(index)"
						@ended="videoEnded(index)"
					></video>
					<!-- #endif -->
					
					<!-- 非微信小程序使用DomVideoPlayer -->
					<!-- #ifndef MP -->
					<DomVideoPlayer
						v-if="shouldRenderVideo(index)"
						:ref="`videoPlayer_${index}`"
						:src="shouldLoadVideoSrc(index) ? item.videoUrl : ''"
						:autoplay="false"
						:loop="true"
						:objectFit="'contain'"
						:controls="false"
						:muted="false"
						:preload="'none'"
						@play="videoPlay(index)"
						@pause="videoPause(index)"
						@ended="videoEnded(index)"
					/>
					<!-- #endif -->
					
					<!-- 视频加载提示 -->
					<view v-if="!shouldRenderVideo(index)" class="video-loading-placeholder">
						<view class="loading-content">
							<text class="loading-text">加载中...</text>
						</view>
					</view>
					
					<!-- 暂停时显示播放图标 - 微信小程序使用cover-view -->
					<!-- #ifdef MP -->
					<cover-view 
						v-if="currentPlayingIndex !== index" 
						class="play-mask" 
						@tap="playVideo(index)"
					>
						<cover-image 
							class="play-icon" 
							src="/static/images/stop.png"
						></cover-image>
					</cover-view>
					<!-- #endif -->
					
					<!-- 暂停时显示播放图标 - 非微信小程序使用view -->
					<!-- #ifndef MP -->
					<view 
						v-if="currentPlayingIndex !== index" 
						class="play-mask" 
						@click.stop="playVideo(index)"
					>
						<image 
							class="play-icon" 
							src="/static/images/stop.png"
						></image>
					</view>
					<!-- #endif -->
					
					<!-- 右侧操作按钮区域 -->
					<view class="action-buttons" @click.stop="">
						<!-- 点赞按钮 -->
						<view class="action-item" @click.stop="handleLike(item, index)">
							<image 
								:key="'like_' + index + '_' + item.isLiked + '_' + (item.likeTimestamp || 0)"
								class="action-icon" 
								:src="item.isLiked ? '/static/images/liked.png' : '/static/images/like.png'"
								mode="aspectFit"
							></image>
							<text class="action-text">{{ formatCount(item.likeCount || 0) }}</text>
						</view>
						
						<!-- 转发按钮 - 微信小程序使用button的open-type -->
						<!-- #ifdef MP -->
						<button class="action-item share-button" open-type="share" @click.stop="handleShareClick(item, index)">
							<image 
								class="action-icon" 
								src="/static/images/share.png"
							></image>
							<!-- <text class="action-text">{{ formatCount(item.shareCount || 0) }}</text> -->
						</button>
						<!-- #endif -->
						
						<!-- 转发按钮 - 非微信小程序使用view -->
						<!-- #ifndef MP -->
						<view class="action-item" @click.stop="handleShare(item, index)">
							<image 
								class="action-icon" 
								src="/static/images/share.png"
							></image>
							<text class="action-text">{{ formatCount(item.shareCount || 0) }}</text>
						</view>
						<!-- #endif -->
					</view>
					
					<!-- 视频信息层（可选） -->
					<view class="video-info" v-if="item.title">
						<text class="video-title">{{ item.title }}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue';
	import { noteLikeApi } from '@/api/discover.js';
	import { toLogin } from '@/libs/login.js';
	
	export default {
		name: 'VerticalVideoSwiper',
		components: {
			DomVideoPlayer
		},
		props: {
			// 视频列表数据
			videoList: {
				type: Array,
				default: () => []
			},
			// 容器高度
			height: {
				type: String,
				default: '100vh'
			},
			// 是否已登录
			isLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				swiperCur: 0, // 当前轮播索引
				currentPlayingIndex: -1, // 当前正在播放的视频索引
				isVideoStarted: false, // 是否已经开始播放视频
				loadedVideoIndexes: new Set(), // 已加载的视频索引集合
				preloadRange: 1, // 预加载范围(当前视频前后各1个,减少同时加载的视频数)
				renderRange: 3, // 渲染范围(当前视频前后各3个)
				loadVideoRange: 1, // 实际加载视频源的范围(当前视频前后各1个)
				currentShareVideo: null, // 当前分享的视频
				videoLoadingStates: {}, // 视频加载状态
				// #ifdef MP
				videoContextList: [] // 微信小程序环境下预创建的videoContext列表
				// #endif
			};
		},
		computed: {
			// 轮播容器高度
			swiperHeight() {
				return this.height;
			},
			
			// 判断视频是否应该被渲染
			shouldRenderVideo() {
				return (index) => {
					// 如果视频列表为空,不渲染
					if (this.videoList.length === 0) return false;
					
					// 计算当前索引与目标索引的距离
					const distance = Math.abs(index - this.swiperCur);
					
					// 处理循环模式下的距离计算
					const circularDistance = Math.min(
						distance,
						this.videoList.length - distance
					);
					
					// 在渲染范围内才渲染
					return circularDistance <= this.renderRange;
				};
			},
			
			// 判断视频是否应该加载源(更严格的控制)
			shouldLoadVideoSrc() {
				return (index) => {
					if (this.videoList.length === 0) return false;
					
					const distance = Math.abs(index - this.swiperCur);
					const circularDistance = Math.min(
						distance,
						this.videoList.length - distance
					);
					
					// 只有在加载范围内才设置src,实现真正的按需加载
					return circularDistance <= this.loadVideoRange;
				};
			}
		},
		mounted() {
			// 预加载第一个视频及周边视频
			this.preloadVideos(0);
			
			// #ifdef MP
			// 微信小程序环境下初始化videoContextList为空数组
			this.videoContextList = [];
			// #endif
			
			// 延迟自动播放第一个视频,确保DOM已渲染
			this.$nextTick(() => {
				setTimeout(() => {
					if (this.videoList.length > 0) {
						this.playVideo(0);
					}
				}, 500);
			});
		},
		methods: {
			/**
			 * 轮播切换事件
			 */
			swiperChange(e) {
			const { current, source } = e.detail;
			
			if (source === 'autoplay' || source === 'touch') {
				const oldIndex = this.swiperCur;
				this.swiperCur = current;
				
				// 立即更新当前播放索引,避免显示暂停图标
				this.currentPlayingIndex = current;
				
				// 强制更新视图,触发shouldLoadVideoSrc重新计算
				// 这会导致超出范围的视频src变为空字符串,停止加载
				this.$forceUpdate();
				
				// 预加载当前及周边视频
				this.preloadVideos(current);
				
				// 清理距离较远的视频
				this.cleanupDistantVideos(current);
				
				// 暂停之前的视频
				if (oldIndex !== current) {
					this.pauseVideoByIndex(oldIndex);
				}
				
				// 自动播放当前视频
				setTimeout(() => {
					this.playVideo(current);
				}, 100);
			}
		},
			
			/**
			 * 预加载视频（当前及前后范围内的视频）
			 */
			preloadVideos(currentIndex) {
				const start = Math.max(0, currentIndex - this.preloadRange);
				const end = Math.min(this.videoList.length - 1, currentIndex + this.preloadRange);
				
				for (let i = start; i <= end; i++) {
					if (!this.loadedVideoIndexes.has(i)) {
						this.loadedVideoIndexes.add(i);
						// 视频会自动加载，这里只是标记
					}
				}
			},
			
			/**
			 * 清理距离当前位置较远的视频，释放内存
			 */
			cleanupDistantVideos(currentIndex) {
				const cleanupDistance = this.preloadRange + 2; // 超出预加载范围2个位置的视频将被清理
				
				this.loadedVideoIndexes.forEach(index => {
					if (Math.abs(index - currentIndex) > cleanupDistance) {
						this.pauseVideoByIndex(index);
						this.loadedVideoIndexes.delete(index);
					}
				});
			},
			
			/**
			 * 视频开始播放事件
			 */
			videoPlay(index) {
				console.log(`视频 ${index} 开始播放`);
				this.isVideoStarted = true;
				this.currentPlayingIndex = index;
				
				// 暂停其他正在播放的视频
				this.videoList.forEach((_, i) => {
					if (i !== index) {
						this.pauseVideoByIndex(i);
					}
				});
			},
			
			/**
			 * 视频暂停事件
			 */
			videoPause(index) {
				console.log(`视频 ${index} 暂停`);
				if (this.currentPlayingIndex === index) {
					this.currentPlayingIndex = -1;
				}
			},
			
			/**
			 * 视频播放完毕事件
			 */
			videoEnded(index) {
				console.log(`视频 ${index} 播放完毕`);
				
				// 触发自定义事件,通知父组件
				this.$emit('videoEnded', {
					index: index,
					video: this.videoList[index]
				});
				
				// TODO: 在这里可以调用接口
				// 例如: 记录观看完成、推荐下一个视频等
				this.handleVideoComplete(index);
			},
			
			/**
			 * 处理视频播放完成后的逻辑
			 */
			handleVideoComplete(index) {
				const video = this.videoList[index];
				console.log('视频播放完成,可以在这里调用接口:', {
					videoId: video.id,
					videoTitle: video.title,
					index: index
				});
				
				// TODO: 调用后端接口
				// 示例:
				// 1. 记录观看完成
				// this.recordVideoComplete(video.id);
				// 
				// 2. 增加播放次数
				// this.incrementPlayCount(video.id);
				//
				// 3. 推荐相关视频
				// this.getRecommendVideos(video.id);
			},
			
			/**
			 * 点击视频区域切换播放/暂停
			 */
			toggleVideoPlay(index) {
				if (this.currentPlayingIndex === index) {
					// 当前视频正在播放,点击暂停
					this.pauseVideoByIndex(index);
				} else {
					// 当前视频暂停中,点击播放
					this.playVideo(index);
				}
			},
			
			/**
			 * 播放指定视频
			 */
			playVideo(index, retryCount = 0) {
				console.log(`点击播放视频: ${index}`);
				
				// 检查视频是否在渲染范围内,如果不在则先不播放
				if (!this.shouldRenderVideo(index)) {
					console.warn(`视频[${index}]不在渲染范围内,等待渲染...`);
					// 等待DOM渲染后重试
					setTimeout(() => {
						if (retryCount < 3) {
							this.playVideo(index, retryCount + 1);
						}
					}, 200);
					return;
				}
				
				// #ifdef MP
				// 微信小程序使用videoContext，如果不存在则尝试创建
				if (!this.videoContextList[index]) {
					console.warn(`videoContext[${index}] 不存在，尝试创建...`);
					try {
						this.videoContextList[index] = uni.createVideoContext(`myVideo${index}`, this);
						
						// 如果创建失败且重试次数未超限,延迟重试
						if (!this.videoContextList[index] && retryCount < 3) {
							console.warn(`videoContext[${index}]创建失败,${200}ms后重试...`);
							setTimeout(() => {
								this.playVideo(index, retryCount + 1);
							}, 200);
							return;
						}
					} catch (error) {
						console.error(`创建videoContext[${index}]失败:`, error);
						// 延迟重试
						if (retryCount < 3) {
							setTimeout(() => {
								this.playVideo(index, retryCount + 1);
							}, 200);
						}
						return;
					}
				}
				
				if (this.videoContextList[index]) {
					try {
						this.videoContextList[index].play();
						console.log(`微信小程序: 调用videoContext[${index}].play()`);
					} catch (error) {
						console.error(`播放视频[${index}]失败:`, error);
					}
				} else {
					console.error(`微信小程序: videoContext[${index}] 仍然不存在`);
				}
				// #endif
				
				// #ifndef MP
				// 其他平台使用DomVideoPlayer
				const videoPlayer = this.$refs[`videoPlayer_${index}`];
				if (videoPlayer && videoPlayer[0]) {
					videoPlayer[0].play();
				} else if (retryCount < 3) {
					// 如果ref不存在,可能是DOM还未渲染,延迟重试
					console.warn(`videoPlayer[${index}]不存在,${200}ms后重试...`);
					setTimeout(() => {
						this.playVideo(index, retryCount + 1);
					}, 200);
				}
				// #endif
			},
			
			/**
			 * 暂停指定索引的视频
			 */
			pauseVideoByIndex(index) {
				// #ifdef MP
				// 微信小程序使用预创建的videoContext
				if (this.videoContextList[index]) {
					try {
						this.videoContextList[index].pause();
					} catch (error) {
						console.error(`暂停视频失败: ${index}`, error);
					}
				}
				// #endif
				
				// #ifndef MP
				// 其他平台使用DomVideoPlayer
				const videoPlayer = this.$refs[`videoPlayer_${index}`];
				if (videoPlayer && videoPlayer[0]) {
					try {
						videoPlayer[0].pause();
					} catch (error) {
						console.error(`暂停视频失败: ${index}`, error);
					}
				}
				// #endif
			},
			
			/**
			 * 处理点赞
			 */
			async handleLike(item, index) {
				// 检查登录状态
				if (!this.isLogin) {
					toLogin();
					return; // 未登录,阻止执行
				}
				
				// 保存原始状态,用于失败时回滚
				const originalLikedState = item.isLiked;
				const originalLikeCount = item.likeCount || 0;
				
				// 乐观更新UI - 立即切换点赞状态
				const newLikedState = !item.isLiked;
				this.$set(item, 'isLiked', newLikedState);
				this.$set(item, 'likeCount', newLikedState ? originalLikeCount + 1 : Math.max(0, originalLikeCount - 1));
				
				// 添加时间戳强制更新图标
				this.$set(item, 'likeTimestamp', Date.now());
				
				// 强制视图更新
				this.$forceUpdate();
				
				console.log(`视频 ${index} 点赞状态: ${item.isLiked}, 点赞数: ${item.likeCount}`);
				
				// 调用API同步点赞状态到服务器
				try {
					const res = await noteLikeApi(item.id);
					if (res.code === 200) {
						console.log('点赞操作成功');
					} else {
						// API返回失败,回滚状态
						this.$set(item, 'isLiked', originalLikedState);
						this.$set(item, 'likeCount', originalLikeCount);
						this.$set(item, 'likeTimestamp', Date.now());
						this.$forceUpdate();
						
						uni.showToast({
							title: res.msg || '操作失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('点赞API调用失败:', error);
					// API调用失败,回滚状态
					this.$set(item, 'isLiked', originalLikedState);
					this.$set(item, 'likeCount', originalLikeCount);
					this.$set(item, 'likeTimestamp', Date.now());
					this.$forceUpdate();
					
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				}
			},
			
			/**
			 * 微信小程序点击分享按钮 - 记录当前视频信息
			 */
			handleShareClick(item, index) {
				// 检查登录状态
				if (!this.isLogin) {
					toLogin();
					return; // 未登录,阻止执行
				}
				
				// 保存当前分享的视频信息
				this.currentShareVideo = item;
				// 通知父组件更新当前视频索引
				this.$emit('updateCurrentVideo', index);
				// 增加转发数量
				this.$set(item, 'shareCount', (item.shareCount || 0) + 1);
				console.log(`微信小程序: 准备分享视频 ${index}`);
			},
			
			/**
			 * 处理转发 - 参考news_details页面(非MP环境)
			 */
			handleShare(item, index) {
				// 检查登录状态
				if (!this.isLogin) {
					toLogin();
					return; // 未登录,阻止执行
				}
				
				// 增加转发数量
				this.$set(item, 'shareCount', (item.shareCount || 0) + 1);
				
				// 保存当前分享的视频信息
				this.currentShareVideo = item;
				
				// #ifdef H5
				// H5环境下，如果是微信浏览器，显示分享引导
				if (this.$wechat && this.$wechat.isWeixin()) {
					this.$emit('showShareInfo', item);
				} else {
					// 非H5微信环境，显示提示
					uni.showToast({
						title: '请在微信中打开分享',
						icon: 'none'
					});
				}
				// #endif
				
				
				console.log(`视频 ${index} 转发, 转发数: ${item.shareCount}`);
			},
			
			/**
			 * 格式化数量显示（超过1万显示为 x.xw）
			 */
			formatCount(count) {
				if (count >= 10000) {
					return (count / 10000).toFixed(1) + 'w';
				}
				return count.toString();
			}
		},
		
		/**
		 * 组件销毁前清理所有视频
		 */
		beforeDestroy() {
			this.videoList.forEach((_, index) => {
				this.pauseVideoByIndex(index);
			});
			this.loadedVideoIndexes.clear();
		}
	}
</script>

<style lang="scss" scoped>
	.vertical-video-swiper {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #000;
		
		.swiper-container {
			width: 100%;
			height: 100%;
		}
		
		.video-item {
			width: 100%;
			height: 100%;
			position: relative;
			background-color: #000;
		}
		
		// 视频加载占位符
		.video-loading-placeholder {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #1a1a1a;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
			
			.loading-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.loading-text {
					color: #fff;
					font-size: 28rpx;
					opacity: 0.6;
				}
			}
		}
		
		// 播放按钮遮罩 - 只包裹图标大小，不覆盖整个区域
		.play-mask {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 120rpx; /* 图标+点击区域 */
			height: 120rpx;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.play-icon {
				width: 80rpx;
				height: 80rpx;
			}
		}
		
		// 右侧操作按钮区域
		.action-buttons {
			// 微信小程序分享按钮样式重置
			.share-button {
				background: transparent;
				border: none;
				padding: 0;
				margin: 0;
				line-height: normal;
				
				&::after {
					border: none;
				}
			}
		}
		
		.action-buttons {
			position: absolute;
			right: 20rpx;
			bottom: 200rpx;
			z-index: 100;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.action-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 40rpx; /* 按钮间距 */
				
				.action-icon {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 8rpx; /* 图标和文字间距 */
					filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.5));
				}
				
				.action-text {
					color: #fff;
					font-size: 24rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
					font-weight: 500;
				}
			}
		}
		
		// 视频信息层
		.video-info {
			position: absolute;
			bottom: 100rpx;
			left: 0;
			right: 120rpx; // 为右侧按钮留出空间
			padding: 0 30rpx;
			z-index: 10;
			
			.video-title {
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
			}
		}
	}
</style>
